<template>
  <div>
      <topBar/>

      <div class="lb">
          <b-carousel
          id="carousel-1"
          v-model="slide"
          :interval="4000"
          controls
          indicators
          background="#ababab"
          img-width="1024"
          img-height="480"
          class="carousel"
          @sliding-start="onSlideStart"
          @sliding-end="onSlideEnd"
        >

        <b-carousel-slide
        caption="First slide"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/115174/12/5085/82552/5eb221d9Eae892403/177da78a78979faf.jpg!cr_1125x445_0_171!q70.jpg.dpg"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/116433/22/5442/98761/5eb3b77aEbfe4d533/ac121f13f1fce67e.jpg!cr_1125x445_0_171!q70.jpg.dpg">
        <h1>Hello world!</h1>
      </b-carousel-slide>

          <!-- Slides with image only -->
      <b-carousel-slide img-src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/111296/32/5142/97343/5eb23c3dE95d2bfb2/c5e2c876f18e5d96.jpg!cr_1125x445_0_171!q70.jpg.dpg"></b-carousel-slide>
      </b-carousel>

      <!-- 品类导航 -->

      <b-container fluid>
        <b-row>
          <b-col cols="3">
            <div>

              <img style="" src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/84753/1/16651/5549/5e7d5f9eE492c3864/4b9963fe16fae211.png.webp"/>
              <div class="iconTitle">京东超市</div>
            </div>
            
          </b-col>
          <b-col cols="3">
            <div>

              <img style="" src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/84753/1/16651/5549/5e7d5f9eE492c3864/4b9963fe16fae211.png.webp"/>
              <div class="iconTitle">京东超市</div>
            </div>
          </b-col>
          <b-col cols="3">
            <div>

              <img style="" src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/84753/1/16651/5549/5e7d5f9eE492c3864/4b9963fe16fae211.png.webp"/>
              <div class="iconTitle">京东超市</div>
            </div>
          </b-col>
          <b-col cols="3">
              <div>

              <img style="" src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/84753/1/16651/5549/5e7d5f9eE492c3864/4b9963fe16fae211.png.webp"/>
              <div class="iconTitle">京东超市</div>
            </div>
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="3">
            <div>

              <img style="" src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/84753/1/16651/5549/5e7d5f9eE492c3864/4b9963fe16fae211.png.webp"/>
              <div class="iconTitle">京东超市</div>
            </div>
            
          </b-col>
          <b-col cols="3">
            <div>

              <img style="" src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/84753/1/16651/5549/5e7d5f9eE492c3864/4b9963fe16fae211.png.webp"/>
              <div class="iconTitle">京东超市</div>
            </div>
          </b-col>
          <b-col cols="3">
            <div>

              <img style="" src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/84753/1/16651/5549/5e7d5f9eE492c3864/4b9963fe16fae211.png.webp"/>
              <div class="iconTitle">京东超市</div>
            </div>
          </b-col>
          <b-col cols="3">
              <div>

              <img style="" src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/84753/1/16651/5549/5e7d5f9eE492c3864/4b9963fe16fae211.png.webp"/>
              <div class="iconTitle">京东超市</div>
            </div>
          </b-col>
        </b-row>
    </b-container>
      
      <b-container fluid>
        <b-row>
          <b-col cols="12">
            <div class="slide-box">
              <div class="slide-item">
                <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/119443/38/4584/172661/5eb6b111Ee93ec93d/67de3ab0fade8287.jpg.dpg"/>
                <div class="price">1199</div>
              </div>
              <div class="slide-item">
                <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/129029/11/130/192847/5eb3a383Eca79c54f/54465b7d2c8f453c.jpg.dpg"/>
                <div class="price">19</div>
              </div>
              <div class="slide-item">
                <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/115992/24/5604/81463/5eb50bcbEb5edef43/1201acbde0b4e222.jpg.dpg"/>
                <div class="price">5299</div>
              </div>
              <div class="slide-item">
                <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/119443/38/4584/172661/5eb6b111Ee93ec93d/67de3ab0fade8287.jpg.dpg"/>
              </div>
              <div class="slide-item">
                <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/119443/38/4584/172661/5eb6b111Ee93ec93d/67de3ab0fade8287.jpg.dpg"/>
              </div>
              <div class="slide-item">
                <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/119443/38/4584/172661/5eb6b111Ee93ec93d/67de3ab0fade8287.jpg.dpg"/>
              </div>
              <div class="slide-item">
                <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/119443/38/4584/172661/5eb6b111Ee93ec93d/67de3ab0fade8287.jpg.dpg"/>
              </div>
              <div class="slide-item">
                <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/119443/38/4584/172661/5eb6b111Ee93ec93d/67de3ab0fade8287.jpg.dpg"/>
              </div>
            </div>
          </b-col>
        </b-row>
      </b-container>

      <b-container fluid>
        <b-row>
          <b-col cols="6" style="padding:0px;">
            <img style="width:100%" src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/49601/16/12206/115887/5d91b4d5E34709952/aba2bcb4855e6e52.png!q70.jpg.dpg"/>
          </b-col>
          <b-col cols="6" style="padding:0px;">
            <img style="width:100%" src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/32449/33/15631/174497/5cc2d86bE0289110c/9c53e25651659d43.png!q70.jpg.dpg"/>
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="6" style="padding:0px;">
            <img style="width:100%" src="https://m.360buyimg.com/mobilecms/s376x200_jfs/t1/128108/24/360/50926/5eb4f610E17b1d2b0/ac60139ed8c4dc2b.png!q70.jpg.dpg"/>
          </b-col>
          <b-col cols="6" style="padding:0px;">
            <img style="width:100%" src="https://m.360buyimg.com/mobilecms/s376x200_jfs/t1/113270/34/5485/62921/5eb4071dE7d114039/a832445aa0c85068.png!q70.jpg.dpg"/>
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="3" style="padding:0px;">
            <img style="width:100%" src="https://m.360buyimg.com/mobilecms/s184x242_jfs/t1/123714/13/219/12235/5eb3f474E97fb7d23/b3702fdfb51ffe42.png!q70.jpg.dpg"/>
          </b-col>
          <b-col cols="3" style="padding:0px;">
            <img style="width:100%" src="https://m.360buyimg.com/mobilecms/s184x242_jfs/t1/120002/5/254/12239/5eb3f5a2E9efaa8c0/c6129be8f76a187a.png!q70.jpg.dpg"/>
          </b-col>
          <b-col cols="3" style="padding:0px;">
            <img style="width:100%" src="https://m.360buyimg.com/mobilecms/s184x242_jfs/t1/129560/5/244/12235/5eb4008bE4b6f429a/2e8939d7d4f98ec2.png!q70.jpg.dpg"/>
          </b-col>
          <b-col cols="3" style="padding:0px;">
            <img style="width:100%" src="https://m.360buyimg.com/mobilecms/s184x242_jfs/t1/119300/5/5571/12239/5eb40124Ef9c0a3c3/70d37bfc62faa473.png!q70.jpg.dpg"/>
          </b-col>
        </b-row>


        <b-row>
          <b-col cols="3" style="padding:0px;">
            <div class="price">免息星球</div>
            <img style="width:100%" src="//m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg.dpg"/>
          </b-col>
          <b-col cols="3" style="padding:0px;">
            <div class="price">每日特价</div>
            <img style="width:100%" src="//m.360buyimg.com/mobilecms/s150x150_jfs/t1/89676/29/5758/20628/5def37a2Eff165a1c/b41fe7c9ac32f16f.jpg!q70.jpg.dpg"/>
          </b-col>
          <b-col cols="3" style="padding:0px;">
            <div class="price">品牌闪购</div>
            <img style="width:100%" src="//m.360buyimg.com/mobilecms/s150x150_jfs/t1/88638/33/5675/28468/5def3b04E728e691f/8997a8bf07db66b7.png!q70.jpg.dpg"/>
          </b-col>
          <b-col cols="3" style="padding:0px;">
            <div class="price">京东直播</div>
            <img style="width:100%" src="//m.360buyimg.com/mobilecms/s150x150_jfs/t1/75300/31/13658/33045/5daeb773Ebbbd91bd/47a1bdf9047ed568.jpg!q70.jpg.dpg"/>
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="12" style="padding:0px;">
            <div class="price">为你推荐</div>
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="6" style="padding:0px;">
            <img style="width:100%" src="//img14.360buyimg.com/mobilecms/s372x372_jfs/t1/128687/14/1179/313881/5eba6139Ee09dc8f2/003f02d515557063.jpg!q70.dpg.webp"/>
          </b-col>
          <b-col cols="6" style="padding:0px;">
            <img style="width:100%" src="//img13.360buyimg.com/mobilecms/s372x372_jfs/t1/117332/10/5070/170692/5eb2670aE00c03ac1/ba52f14f53fc9f8f.jpg!q70.dpg.webp"/>
          </b-col>

          <b-col cols="6" style="padding:0px;">
            <img style="width:100%" src="//img13.360buyimg.com/mobilecms/s372x372_jfs/t1/99997/2/8023/334329/5e01b1daEe2200c87/4e60d51705927aa8.jpg!q70.dpg.webp"/>
          </b-col>
          <b-col cols="6" style="padding:0px;">
            <img style="width:100%" src="//img13.360buyimg.com/mobilecms/s372x372_jfs/t1/63797/36/8493/160059/5d65df45E70658e1f/f8097aa17c822621.jpg!q70.dpg.webp"/>
          </b-col>
        </b-row>

      </b-container>

      <b-container>
        <b-row style="margin:20px;">
          <b-col cols="3">
              <h3 style="font-weight:350">登录</h3>
          </b-col>
          <b-col cols="3">
              <h3 style="font-weight:350">注册</h3>
          </b-col>
          <b-col cols="3">
              <h3 style="font-weight:350">客户服务</h3>
          </b-col>
          <b-col cols="3">
              <h3 style="font-weight:350">返回顶部</h3>
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="4">
              <img src="//m.360buyimg.com/mobilecms/jfs/t16423/186/2517573622/5186/75a541f7/5ab1c0deN947bdcba.png"/>
          </b-col>
          <b-col cols="4">
              <img src="//m.360buyimg.com/mobilecms/jfs/t18550/294/898388074/6574/3a8c5413/5ab0b8e9Ne9c48331.png"/>
          </b-col>
          <b-col cols="4">
              <img src="//m.360buyimg.com/mobilecms/jfs/t14581/218/2689195961/4696/203b872a/5ab1c0f2N51c3f1bb.png"/>
          </b-col>
        </b-row>
        <b-row>
          <b-col cols="12" class="price">
              Copyright © 2004-2019 京东JD.com 版权所有
          </b-col>
        </b-row>
      </b-container>
    </div>
    
      <toolBar/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Logo from '~/components/Logo.vue'
import topBar from '~/components/topBar.vue'
import toolBar from '~/components/toolBar.vue'

import axios from 'axios'

export default Vue.extend({
  components: {
    Logo,
    topBar,
    toolBar
  },
  data (){
    return {
      slide:2
    }
  },
  methods:{
    onSlideStart(){
      // console.log('onSlideStart')
    },
    onSlideEnd(){
      // console.log('onSlideEnd')
    }
  },
  asyncData (){
    console.log('服务端渲染 index')
    let url = 'http://pv.sohu.com/cityjson?ie=utf-8'
    console.log(process.server?"serverSide":"clientSide")
    return axios.post(url).then(res=>{
      let data = res.data;
      console.log(data)
      let json = data.split(" = ")[1];
      let jsonStr = json.replace(";","");
      console.log("----------   "+jsonStr)
      let pasedData = JSON.parse(jsonStr)
      console.log("你的公网IP是： "+pasedData.cip + " 城市: " + pasedData.cname)
      return {
        datalist : res.data.data
      }
    }).catch(function(err){
      console.log(err)
    })
    
  }
})
</script>

<style>
.carousel{
  text-shadow: 1px 1px 2px #333;
}

.slide-box{
            /* margin-top: 200px; */
            display: -webkit-box;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
        }
        .slide-item{
            padding:5px 10px;
        }
/* ————————————————
版权声明：本文为CSDN博主「又又呢」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42050203/java/article/details/82712176 */

.iconTitle{
  text-align:center;margin:15px 0px;
}

.price{
  text-align:center;
  margin:15px 0px;
  color: red;
}

.lb{
  width:80%;
  margin:0 auto;
}

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}

@media ( min-width : 768px) {
	.col-sm-5ths {
		width: 20%;
		float: left;
	}
}

@media ( min-width : 992px) {
	.col-md-5ths {
		width: 20%;
		float: left;
	}
}

@media ( min-width : 1200px) {
	.col-lg-5ths {
		width: 20%;
		float: left;
	}
}

/* 作者：全栈弄潮儿
链接：https://www.jianshu.com/p/10f466ee0ab4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 */


.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>
